﻿<!DOCTYPE html>
<html>
<head>
  <title>跨年倒计时</title>
  <style>
    body {
      background-color: black;
      color: yellow;
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 10px;
    }
    #countdown {
      font-size: 85px;
      text-align: center;
      margin-top: 1150px;
      position: absolute;
      z-index:2;
    }
    .img{
        position:relative;
        z-index:1;
    }

  </style>
</head>
  <div id="countdown"></div>
  <img src="https://5b0988e595225.cdn.sohucs.com/images/20200422/ca03afbbd5a34bc98305920c9518f8f3.jpeg"></img>
  <script>
    // 获取当前时间
    var now = new Date();

    // 设置跨年的日期
    var newYear = new Date(now.getFullYear() +0, +5, +26);

    // 计算时间差
    var timeLeft = newYear - now;

    // 将时间差转换为天、小时、分钟和秒
    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // 更新倒计时的元素内容
    var countdownElement = document.getElementById("countdown");
    countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
    
    // 每秒更新一次倒计时
    setInterval(function() {
      now = new Date();
      timeLeft = newYear - now;
      days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
      countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
       if (timeLeft <0) {
                clearInterval(countdown);
                document.getElementById("countdown").innerHTML = "";
            }
    }, 1000);
  </script>
</body>
</html>